<template>
  <div class="app-container">
    <div class="app-left">
      <div class="app-logo">用于做测试的项目</div>
      <el-menu
        class="app-menu"
        router
        :default-active="active"
        background-color="#304156"
        text-color="#C1CBD9"
        style="border-right: none;"
        active-text-color="#409EFF">
        <el-menu-item index="/home">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item
          v-for="(item, index) in menu"
          :key="index"
          :index="'/test' + item">
          <i class="el-icon-setting"></i>
          <span slot="title">{{ 'Test' + item }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="app-right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { num } from '@/router'
export default {
  data() {
    return {
      active: '/home',
      menu: num
    }
  },
  watch: {
    '$route': {
      handler (val) {
        this.active = val.path
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  .app-left {
    width: 220px;
    height: 100%;
    background: #ccc;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    .app-logo {
      height: 60px;
      background: #324761;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      color: #fff;
      font-size: 16px;
      letter-spacing: 2px;
    }
    .app-menu {
      flex: 1 1 auto;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .el-menu-item.is-active {
        background: #293c52 !important;
      }
    }
  }
  .app-right {
    flex: 1 1 auto;
    height: 100%;
    background: #fff;
    overflow: auto;
  }
}
</style>
